<script setup>
import { onMounted, ref } from 'vue';
import { queryAll ,addApi,queryByIdApi, updateApi ,deleteApi} from '@/api/dept'
import { ElMessage ,ElMessageBox } from 'element-plus'


// 用queryAll查询数据并将数据存储在dataList集合里
const dataList = ref([])
const queryList = async () => {
  let result = await queryAll()
  // 赋值
  dataList.value = result.data
}




onMounted(() => {
  queryList()
})


// 弹框定义
const tips = ref('新增部门')
// 弹框默认显示
const dialogshow = ref(false)
// // 弹框显示(修改默认值要加上value)
const showDialog = () => {
  dialogshow.value = true
}



// 新增或修改的数据对象
const ruleForm = ref({name: '',})
// 校验规则
const rules = ref({
  name: [
    { required: true, message: 'Please 部门名称不能为空 ', trigger: 'blur' },
    { min: 3, max: 5, message: '部门名称3-50', trigger: 'blur' },
  ]}) 
// 保存方法
// 1.1关联表单对象
const ruleFormRef = ref(null)
// 1.2保存操作
const save = async() => { 
  // 1.3校验表单参数
  //等同于 if (ruleFormRef === null || ruleFormRef === undefined) {
//   return; // 终止当前函数执行
// }
  if(!ruleFormRef)return
  // 表单数据校验 
await ruleFormRef.value.validate(async(valid, fields) => {
    if (valid) {
      let result = null

      if (ruleForm.value.id ) { 
        // 修改
        result = await updateApi(ruleForm.value)
      }else{  
        result  =   await addApi(ruleForm.value)
}





      // 调用添加方法
      // 确保只有在表单数据验证通过后才执行数据提交操作
      
      if(result.code){
       ElMessage({
    message: '操作成功',
    type: 'success',
    plain: true,
  })
      }else{
         ElMessage({
    message: '操作失败',
    type: 'success',
    plain: true,
  })
      }
 queryList()
dialogshow.value = false
      
    } 
    
    else {
      console.log('error submit!', fields)
    }
  })
}
// 编辑
const edit = async(id) => { 
   tips.value = ref('修改部门')
  const result = await queryByIdApi(id);
  // result.code如果响应的数据是正确的
  if(result.code){  
    dialogshow.value = true;
    ruleForm.value = result.data;
  }
}

// 删除
const delById = async(id) => { 
  ElMessageBox.confirm(
    '确认删除该部门吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
      
       const result = await deleteApi(id);
      if(result.code){  
        ElMessage.success('删除成功')
         queryList()
      }else{
        ElMessage.error('删除失败')
      }
    })
    // 取消
    .catch(() => {
      ElMessage('已经取消了删除')
    })
}
</script>

<template>
  <h3>部门管理</h3>
  <el-button type="primary" @click="showDialog">新增</el-button>
  <!-- 编辑弹框 -->
  <el-dialog v-model="dialogshow" v-bind:title="tips" width="500" :before-close="handleClose">



    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="save ()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


  <p>


    <el-table :data="dataList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="部门名字" width="180" />
      <el-table-column prop="updateTime" label="最后修改时间 " />
      <!--  #default="scope"：这里使用了作用域插槽，scope里包含了当前行的数据。scope.row代表整行数据对象，scope.row.id则是当前行的 ID。
操作按钮功能 -->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="mini" @click="delById(scope.row.id)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>


  </p>
</template>

<style scoped></style>